* {
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#rich-man-role,
#rich-man-build,
#rich-man-map {
  position: absolute;
}

#rich-man-role {
  z-index: 1;
}

#rich-man-build {
  z-index: 0;
}

#rich-man-map {
  z-index: -1;
}

$border-radius: 6px;
$role-item-width: 300px;
$common-padding: 5px;
$common-margin: 5px;

.role-list {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -25%);
  display: flex;
  flex-direction: column;
  border-radius: $border-radius;
  background: rgba(255, 255, 255, 0.7);
  color: #57606f;
  z-index: 2;

  &::before,
  &::after {
    content: "";
    border-radius: $border-radius;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    width: 100%;
    height: 10px;
    display: block;
    background: #2ed573;
  }

  &::after {
    background: none;
  }

  .role-list-title {
    margin-top: $common-padding;
    margin-bottom: $common-padding;
    display: flex;
    justify-content: center;
    letter-spacing: 0.2em;
    font-weight: bold;
  }

  .role-list-item {
    display: flex;
    flex-direction: column;

    .role-item {
      width: $role-item-width;
      margin: $common-margin;
      display: flex;
      flex-direction: row;

      * {
        flex: 1;
        padding: $common-padding;
      }
    }

    .role-item.role-item-active {
      background: #1e90ff;
      color: #fff;
      border-radius: $border-radius;
    }
  }

  .role-control {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-bottom: $common-margin;

    * {
      padding: $common-padding;
      color: #fff;
      border-radius: $border-radius;
      user-select: none;
      cursor: pointer;
    }

    .role-control-dice {
      background: #ff4757;
    }

    .role-control-buy {
      background: #3742fa;
    }

    .role-control-jump {
      background: #ff6348;
    }

    .role-control-pack {
        background: #1abc9c;
    }

    *.disabled {
      background: #a4b0be;
      color: #dfe4ea;
    }
  }

  #role-current-time {
    display: flex;
    margin-top: $common-margin;
    margin-bottom: $common-margin;
    justify-content: center;
    font-size: 24px;
  }
}

.role-package {
    position: absolute;
    width: 200px;
    height: 300px;
    background: #1e90ff;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    display: none;
    flex-direction: column;
    border-radius: 5px;
    z-index: 4;

    &::before {
        position: absolute;
        content: attr(data-packname);
        display: block;
        font-size: 14px;
        color: #fff;
        left: 50%;
        transform: translate(-50%, 0);
    }

    .role-package-close {
        width: 24px;
        height: 24px;
        background: #1abc9c;
        display: flex;
        color: #fff;
        border-top-right-radius: 5px;
        justify-content: center;
        align-items: center;
        align-self: flex-end;
        cursor: pointer;
    }
    .role-package-list {
        flex: 1;
        display: flex;
        flex-flow: wrap row;
        align-content: flex-start;
        background: #1abc9c;
        box-sizing: border-box;

        .role-package-item {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 33.3%;
            height: 33.3%;
            font-size: 12px;
            cursor: pointer;

            .role-package-name {
                text-align: center;
                background: #fff;
            }
            .role-package-count {
                text-align: center;
                background: #fff;
            }
            img {
                width: 100%;
                height: 65%;
            }
        }
        .role-package-item:hover {
            color: goldenrod
        }
    }
}

#role-dice {
  position: absolute;
  left: 50%;
  top: 63%;
  transform: translate(-50%, -63%);
  display: flex;
  flex-direction: column;
  background: transparent;
  opacity: 0.95;
  z-index: 3;

  .role-dice-list {
    display: flex;
    flex-direction: row;

    &:nth-child(2) {
      & > .role-dice-delta:nth-child(2) {
        background: #1abc9c;
      }
    }
    &:nth-child(1) {
      & > .role-dice-delta:nth-child(1) {
        background: #c0392b;
      }
      & > .role-dice-delta:nth-child(1).active {
        background: #e74c3c;
      }
      & > .role-dice-delta:nth-child(2) {
        background: #d35400;
      }
      & > .role-dice-delta:nth-child(2).active {
        background: #e67e22;
      }
      & > .role-dice-delta:nth-child(3) {
        background: #f39c12;
      }
      & > .role-dice-delta:nth-child(3).active {
        background: #f1c40f;
      }
    }
    &:nth-child(2) {
      & > .role-dice-delta:nth-child(1) {
        background: #1abc9c;
      }
      & > .role-dice-delta:nth-child(1).active {
        background: #16a085;
      }
      & > .role-dice-delta:nth-child(2) {
        background: transparent;
      }
      & > .role-dice-delta:nth-child(3) {
        background: #27ae60;
      }
      & > .role-dice-delta:nth-child(3).active {
        background: #2ecc71;
      }
    }
    &:nth-child(3) {
      & > .role-dice-delta:nth-child(1) {
        background: #8e44ad;
      }
      & > .role-dice-delta:nth-child(1).active {
        background: #9b59b6;
      }
      & > .role-dice-delta:nth-child(2) {
        background: #f78fb3;
      }
      & > .role-dice-delta:nth-child(2).active {
        background: #f8a5c2;
      }
      & > .role-dice-delta:nth-child(3) {
        background: #3dc1d3;
      }
      & > .role-dice-delta:nth-child(3).active {
        background: #63cdda;
      }
    }

    .role-dice-delta {
      width: 32px;
      height: 32px;
      border: solid 1px #bdc3c7;
      display: flex;
      color: #333;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      font-style: italic;
    }

    .role-dice-delta.active {
      font-size: 16px;
      color: #fff;
      font-weight: bold;
      font-style: normal;
    }
  }
}

#rich-man-talk {
  animation: shake 5s ease-in-out 5s infinite;
  background-color: rgba(236, 217, 188, 0.9);
  border: 1px solid rgba(224, 186, 140, 1);
  border-radius: 12px;
  box-shadow: 0 3px 15px 2px rgba(191, 158, 118, 0.2);
  font-size: 18px;
  line-height: 24px;
  margin: -30px 0;
  min-height: 70px;
  opacity: 0;
  overflow: hidden;
  padding: 5px 10px;
  position: absolute;
  left: 50%;
  top: 85%;
  transform: translate(-50%, -85%);
  text-overflow: ellipsis;
  transition: opacity 1s;
  width: 250px;
  word-break: break-all;
  z-index: 3;
}

#rich-man-talk.active {
  opacity: 1;
  transition: opacity 0.3s;

  span {
    color: #e84118;
  }
}

@keyframes shake {
  25% {
    transform: translate(-50%, -85%) translate(0.5px, -1.5px) rotate(-2.5deg);
  }
  50% {
    transform: translate(-50%, -85%) translate(0.5px, -1px) rotate(2.5deg);
  }
  75% {
    transform: translate(-50%, -85%) translate(0.5px, -0.5px) rotate(-2.5deg);
  }
  0%,
  100% {
    transform: translate(-50%, -85%) translate(0.5px, 0.5px) rotate(0deg);
  }
}
